<template>
	<view class="container">
		
		<!-- 顶部导航 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#536CFC" status-bar title="应用" />
		
		<!-- 已办 -->
		<uni-section title="已办" type="line">
			<uni-grid :column="4" :showBorder="false" @change="change">
				<!-- 遍历单元格 -->
				<uni-grid-item :highlight="true" v-for="(item, index) in ybList" :index="index" :key="index">
					<view class="grid-item-box">
						<view>
							<uni-icons type="image" :size="30" color="#777" />
						</view>
						<view>
							<text class="text">{{item.title}}</text>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		
		<!-- 发起 -->
		<uni-section title="发起" type="line" class="section">
			<uni-grid :column="4" :showBorder="false" @change="change">
				<!-- 遍历单元格 -->
				<uni-grid-item :highlight="true" v-for="(item, index) in fqList" :index="index" :key="index">
					<view class="grid-item-box">
						<view>
							<uni-icons type="image" :size="30" color="#777" />
						</view>
						<view>
							<text class="text">{{item.title}}</text>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		
		
		<!-- 综合 -->
		<uni-section title="综合" type="line" class="section">
			<uni-grid :column="4" :showBorder="false" @change="change">
				<!-- 遍历单元格 -->
				<uni-grid-item :highlight="true" v-for="(item, index) in zhList" :index="index" :key="index">
					<view class="grid-item-box">
						<view>
							<uni-icons type="image" :size="30" color="#777" />
						</view>
						<view>
							<text class="text">{{item.title}}</text>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		
	</view>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	const ybList = ref([
		{ title: "收文已办" },{ title: "发文已办" },{ title: "舆情已办" },
		{ title: "督办已办" },{ title: "请假已办" },{ title: "用印已办" }
	])
	const fqList = ref([
		{ title: "请假申请" },{ title: "出差申请" }
	])
	const zhList = ref([
		{ title: "我的日程" },{ title: "党建信息" },{ title: "综合信息" }
	])
	
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
	}
	.section {
		margin-top: 20rpx;
	}
	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
